<template>
  <div class="custom_video_list_item">
    <router-link :to="{ name: item.router }">
      <img :src="item.image" v-lazy="item.image" />
      <article class="custom_video_list_item_aside">
        <header>
          <h1>{{ item.title }}</h1>
        </header>
        <div class="custom_video_list_item_aside_count">
          <div><van-icon name="play-circle-o" />{{ item.aside.playCount }}</div>
          <div>{{ item.aside.good }}</div>
        </div>
      </article>
    </router-link>
    <div
      class="custom_video_list_item_superscript"
      :class="item.superscript === 'live' && 'live'"
    >
      {{ item.superscript === "live" ? $t("lang.直播") : $t("lang.短视频") }}
    </div>
  </div>
</template>
<script>
export default {
  name: "videoListItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_video_list_item {
  position: relative;
  .custom_video_list_item_superscript {
    position: absolute;
    top: 0;
    right: (10 / @base);
    background-color: #ffb037;
    color: #493323;
    font-size: (12 / @base);
    padding: (1.5 / @base) (5 / @base);
    border-bottom-left-radius: (2.5 / @base);
    border-bottom-right-radius: (2.5 / @base);
    &.live {
      background-color: #07c160;
      color: #fff;
    }
  }
  a {
    display: block;
    width: 100%;
    height: (320 / @base);
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      background-color: #999;
    }
    article {
      &.custom_video_list_item_aside {
        .custom_video_list_item_aside_count {
          display: flex;
          div {
            width: 50%;
            color: #fff;
            font-size: (12 / @base);
            .van-icon {
              vertical-align: middle;
              margin: 0 (5 / @base) 0 0;
            }
            &:first-child {
              text-align: left;
              vertical-align: middle;
            }
            &:last-child {
              text-align: right;
            }
          }
        }
      }
      position: absolute;
      bottom: (10 / @base);
      left: (10 / @base);
      right: (10 / @base);
      header {
        h1 {
          font-size: (14 / @base);
          font-weight: 400;
          color: #fff;
          text-align: left;
        }
      }
      p {
        color: #fff;
        font-size: (12 / @base);
        text-align: left;
      }
    }
  }
}
</style>
